<template>
    <div class="bpus-member-login">
        <el-row :gutter="50">
            <el-col :md="14">
                <img src="./image/illustration.png" />
            </el-col>
            <el-col :md="10">
                <h2 class="bpus-title">用户登录</h2>
                <div class="bpus-desc">欢迎使用{{ config.title }}</div>
                <form method="post" action="javascript:;" @submit="login">
                    <div class="bplus-group">
                        <el-input v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
                    </div>
                    <div class="bplus-group">
                        <el-input type="password" v-model="form.pwd" placeholder="请输入密码" prefix-icon="el-icon-user"></el-input>
                    </div>
                    <div class="bplus-group pagerandom">
                        <el-input v-model="form.pagerandom" placeholder="请输入验证码" prefix-icon="el-icon-code"></el-input>
                        <img
                            alt="刷新验证码"
                            title="点击刷新验证码"
                            @click="loadCaptch"
                            :src="captchUrl"
                            class="randcode"
                            style="cursor: pointer; width: 120px; height: 35px; float: right"
                        />
                    </div>
                    <div class="bplus-group" v-if="rules.length > 1">
                        <el-radio-group v-model="form.cx">
                            <el-radio-button disabled label="选择角色"></el-radio-button>
                            <el-radio-button v-for="r in rules" :label="r" :key="r"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="bplus-group">
                        <el-button type="success" style="display: block; width: 100%" native-type="submit">登录</el-button>
                    </div>
                    <div class="bplus-group">
                        <div style="display: flex; justify-content: space-between; align-items: center">
                            <router-link to="/member/register">还没有账号？注册账号</router-link>
                        </div>
                    </div>
                </form>
            </el-col>
        </el-row>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .bpus-member-login {
        width: 1140px;
        margin: 0 auto;
        padding-top: 100px;
        height: 100%;

        .bpus-title {
            color: #4680ff !important;
        }

        .bpus-desc {
            margin-bottom: 30px;
        }

        .bplus-group {
            margin-bottom: 20px;

            .el-input input {
                height: 48px;
                line-height: 48px;
                border-radius: 50px;
            }
        }

        .pagerandom {
            position: relative;

            .el-input input {
                padding-right: 120px;
            }

            .randcode {
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
</style>

<script>
    import config from "@/config";
    import { canLogin } from "@/stores";
    import { captch } from "@/utils/utils";

    export default {
        name: "bpus-member-login",
        data() {
            return {
                config,
                captchUrl: "",
                loading: false,
                form: {
                    username: "",
                    pwd: "",
                    cx: "用户",

                    /* 验证码段 */
                    pagerandom: "",
                    a: "a",
                    /* 验证码段 */
                },
                rules: ["用户"],
            };
        },
        watch: {},
        computed: {},
        methods: {
            login() {
                this.loading = true;
                canLogin(this.form)
                    .then((res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.$message.success("登录成功");
                            var redirect = this.$route.query.redirect;
                            if (redirect) {
                                this.$router.replace(redirect);
                            } else {
                                this.$router.replace("/member/sy");
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                        if (res.code == 20) {
                            this.loadCaptch();
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
            loadCaptch() {
                captch().then((res) => {
                    console.log(res);
                    this.form.captchToken = res.token;
                    this.captchUrl = res.url;
                });
            },
        },
        created() {
            this.loadCaptch();
        },
        mounted() {},
        destroyed() {},
    };
</script>
